
import { useState } from "react";

function App(){

    const [ obj,setObj] = useState({
        x:0,
        y:0,
        w:100,
        h:100
    })

    function mouseMove(e){ 
      console.log(e.clientX, e.clientY);

    // 鼠标移动的时候修改 x 和 y 会导致 w 和 h 的数据丢失
    // 因为我们赋值的对象中缺少 w 和 h
    // setObj({
    //     x: evnet.clientX,
    //     y: evnet.clientY
    // })


    // 如果这么写会有 w 和 h 两个值没有变化的属性，所以会比较浪费
    // setObj({
    //     x: evnet.clientX,
    //     y: evnet.clientY,
    //     w: 100,
    //     h: 100
    // })

    // 可以使用但是依然后 w 和 h 

    setObj({
        ...obj,
        x: e.clientX,
        y: e.clientY
    })

    // 建议将 4 个属性写成两个对象
    }

   return <div onMouseMove={mouseMove} style={{ width: '100vw', height: '100vh', backgroundColor: '#f66' }}>

        <h1>
            x: {obj.x} ---- y: {obj.y},
            w: {obj.w} ---- h: {obj.h}
        </h1>
    </div>
}

export default App;